import { FC } from 'react';
import Question from '@/components/questionCom';
import Chat from '@/components/chatCom';
import CodeEditor from '@/components/editorCom';
import InputCom from '@/components/InputCom';
import { login } from '@/request/modules/login';
import { STORAGE } from '@/utils';
import { Wrap } from '@/components/wrap';

const Content: FC = () => {
  return (
    <div className='flex h-full justify-between p-[44px] bg-base'>
      <img
        className='w-[45px] h-[26px] fixed top-0 left-[44px] mt-[7px]'
        src={new URL('@/assets/imgs/icon-logo.png', import.meta.url).href}
        alt=''
      />
      <div className='flex flex-col grow shrink basis-0 mr-[16px]'>
        <Question />
        <CodeEditor />
      </div>
      <div className='flex flex-col grow shrink basis-0'>
        <Chat>
          <InputCom />
        </Chat>
      </div>
    </div>
  );
};

const MainPage: FC = () => {
  return (
    <Wrap>
      <Content />
    </Wrap>
  );
};
export default MainPage;

export const LoaderFn = async () => {
  const res = await login({ username: 'admin', password: 'admin' });
  if (res.access && res.refresh) {
    sessionStorage.setItem(STORAGE.TOKEN, res.access);
    return res;
  }
};
